<template>
	<div class="commenFooter">
		<div class="list" :class="{'check':checkIndex==index}" v-for="(item,index) in list" :key="index"
			@click="goToPage(index)">
			<image :src="item.img" mode=""></image>
			<image :src="item.checkImg" mode=""></image>
			<text>{{item.title}}</text>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['checkIndex'],
		data() {
			return {
				list: [{
						img: 'https://www.yongshantuan.cn/images/yongshan/merchant/li1.png',
						checkImg: 'https://www.yongshantuan.cn/images/yongshan/merchant/li1_check.png',
						title: '订单'
					},
					{
						img: 'https://www.yongshantuan.cn/images/yongshan/merchant/li2.png',
						checkImg: 'https://www.yongshantuan.cn/images/yongshan/merchant/li2_check.png',
						title: '菜品'
					},
					{
						img: 'https://www.yongshantuan.cn/images/yongshan/merchant/li3.png',
						checkImg: 'https://www.yongshantuan.cn/images/yongshan/merchant/li3_check.png',
						title: '数据'
					},
					{
						img: 'https://www.yongshantuan.cn/images/yongshan/merchant/li4.png',
						checkImg: 'https://www.yongshantuan.cn/images/yongshan/merchant/li4_check.png',
						title: '设置'
					}
				]
			}
		},
		methods: {
			goToPage(index) {
				let url;
				switch (index) {
					case 0:
						url = '/pages/index/index';
						break;
					case 1:
						url = '/pages_food/food/food';
						break;
					case 2:
						url = '/pages_data/data/data';
						break;
					case 3:
						url = '/pages_set/set/set';
						break;
				}
				console.log(url);
				uni.reLaunch({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.commenFooter {
		background-color: #fff;
		padding: 20rpx 0;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999999;
		@include flexs(space-between, center);

		div {
			width: 25%;
			font-size: 28rpx;
			@include flexs(center, center);
			flex-direction: column;

			image {
				width: 60rpx;
				height: 60rpx;

				&:nth-child(1) {
					display: block;
				}

				&:nth-child(2) {
					display: none;
				}
			}
		}

		.check {
			color: #FA690A;

			image {
				&:nth-child(1) {
					display: none;
				}

				&:nth-child(2) {
					display: block;
				}
			}
		}

	}
</style>
